<template>
  <div class="post-detail-page">
    <modal title="删除文章" :visible="modalIsVisible"
      @modal-on-close="modalIsVisible = false"
      @modal-on-confirm="hideAndDelete"
    >
      <p>确定要删除这篇文章吗？</p>
    </modal>
    <article class="w-75 mx-auto mb-5 pb-3" v-if="currentPost">
      <img :src="currentImageUrl" alt="currentPost.title" class="rounded-lg img-fluid my-4" v-if="currentImageUrl">
      <h2 class="mb-4">{{currentPost.title}}</h2>
      <div class="user-profile-component border-top border-bottom py-3 mb-5 align-items-center row g-0">
        <div class="col">
          <user-profile :user="currentPost.author" v-if="typeof currentPost.author === 'object'"></user-profile>
        </div>
        <span class="text-muted col text-right font-italic">发表于：{{currentPost.createdAt}}</span>
      </div>
      <div v-html="currentHTML"></div>
      <div class="btn-group mt-5">
        <!-- v-if="showEditArea"  -->
        <router-link 
          type="button"
          class="btn btn-success"
          :to="{name: 'createPost', query: { id: currentPost._id}}"
          v-if="currentPost.column === store.state.user.column"
        >  
          编辑
        </router-link>
        <button type="button" class="btn btn-danger" @click.prevent="modalIsVisible = true" v-if="currentPost.column === store.state.user.column">删除</button>
      </div>
      <!-- 点赞、评论、收藏按钮  点赞有爱心样式、评论有评论icon、收藏有收藏icon -->
      <div class="btn-group mt-5" v-if="currentPost.column === store.state.user.column">
        <!-- 编辑和删除按钮保持不变 -->
      </div>
      <post-actions
        :initial-likes="currentPost.likes || 0"
        :initial-comments="currentPost.comments || 0"
        :initial-collects="currentPost.collects || 0"
        :initial-is-liked="currentPost.isLiked || false"
        :initial-is-collected="currentPost.isCollected || false"
        @toggle-comments="showCommentArea = !showCommentArea"
      />
      <div class="comment-area" v-if="showCommentArea">
        <textarea style="width: 100%; height: 100px;" placeholder="请输入评论内容"></textarea>
        <el-button type="primary" class="mt-2 btn-block" @click="showCommentArea = false">提交</el-button>
      </div>
    </article>
    <!-- <button type="button" class="btn btn-danger" @click.prevent="modalIsVisible = true">删除</button> -->

  </div>

</template>
  
  <script lang="ts">
  import { defineComponent, onMounted, computed,ref} from 'vue'
  import MarkdownIt from 'markdown-it'
  import { useStore } from 'vuex'
  import { useRoute,useRouter } from 'vue-router'
  import { ResponseType,UserProps,GlooalDataProps, PostProps, ImageProps, ColumnProps } from '../store'
  import UserProfile from '../components/UserProfile.vue'
  import Modal from '@/components/Modal.vue'
  import createMessage from '@/components/createMessage'
  import PostActions from '@/components/PostActions.vue'
  
  export default defineComponent({
    name: 'post-detail',
    components: {
      UserProfile,
      Modal,
      PostActions
    },
    setup() {
      const showCommentArea = ref(false)
      const islike = ref(false)
      const isstar = ref(false)
      const store = useStore<GlooalDataProps>()
      const route = useRoute()
      const router = useRouter()
      const modalIsVisible = ref(false)
      const currentId = route.params.id
      // console.log(currentId)
     
      const md = new MarkdownIt()
      onMounted(() => {
        store.dispatch('fetchPostDetail', currentId)
        // console.log()
        
      })
     
      // console.log('1',store.state.posts)
      const currentPost = computed<PostProps>(() => store.getters.getCurrentPost(currentId))
      // console.log(currentPost)
      const currentHTML = computed(() => {
      const { content, isHTML } = currentPost.value
      if (currentPost.value && content) {
        return isHTML ? content : md.render(content)
      } else {
        return ''
      }
    })
      const showEditArea = computed(() => {
      const { isLogin, _id } = store.state.user
      if (currentPost.value && currentPost.value.author && isLogin) {
        const postAuthor = currentPost.value.author as UserProps
        return postAuthor._id === _id
      } else {
        return false
      }
    })
    const hideAndDelete = () => {
      modalIsVisible.value = false
      store.dispatch('deletePost', currentId).then((rawData: ResponseType<PostProps>) => {
        createMessage('删除成功，2秒后跳转到专栏首页', 'success', 2000)
        setTimeout(() => {
          router.push({ name: 'column', params: { id: rawData.data.column } })
        }, 2000)
      })
    }
    // 修改为返回 ColumnProps 类型对象
    const currentColumn = computed<ColumnProps>(() => {
      const column = store.state.columns[0];
      return {
        _id: column? column._id : '',
        title: column? column.title : '',
        description: column? column.description : '',
        avatar: column?.avatar
      };
    });

      // const currentImageUrl = computed(() => {
      //   console.log(currentPost.value)
      //   if (currentPost.value && currentPost.value.image) {
      //     const { image } = currentPost.value
      //     return (image as ImageProps).url + '?x-oss-process=image/resize,w_850'
      //   } else {
      //     return null
      //   }
      // })
      const currentImageUrl = currentColumn
      return {
        showCommentArea,
        isstar,
        islike,
        store,
        currentPost,
        currentImageUrl,
        currentHTML,
        showEditArea,
        hideAndDelete,
        modalIsVisible,
        currentColumn
      }
    }
  })
  </script>